import {h,render} from 'vue';
import Toast from './Toast.vue';
export function showToast(options={}){
    const {message='',duration=3000} =  options;
    //在内存中创建一个DIV,做为渲染的容器
    const container = document.createElement('div');
    //把虚拟DOM变成真实DOM并且插入容器中
    //h的第一个参数是虚拟DOm的类型，可是一个字符串表示原生的元素div span
    //也可以是一个组件定义
    let start = Date.now();
    render(
        h(Toast,{
            message,
            duration,
            //凡是以on开头的不是普通属性，而是表示监听 一个名称为destroy的自定义事件
            onDestroy:()=>{
                //向Toast传递属性，这个其实是一个钩子函数
                //3秒后把此容器从页面里删除掉
                document.body.removeChild(container);
                console.log(Math.floor((Date.now()-start)/1000));
            }
        }),//()=>h('span','hello')
        container,
       
    );
    //把这个container容器添加到body上
    document.body.appendChild(container);
}

/**
 * h createElement 可以创建虚拟DOM
 * render是指的渲染函数，可以把虚拟DOM变成真实DOM，并插入到容器中
 * h 其实是一个重载的方法
 * h(类型,儿子..)
 * h(类型，属性，儿子...)
 * 
 * [Vue warn]: Non-function value encountered for default slot. 
 * Prefer function slots for better performance. 
  at <Toast message="提示" duration=3000 onDestroy=fn<onDestroy> >

 */
/**
 * 开始时间100
 * 1.挂载Toast组件，这个isVisible为false, div不显示,DOM也不存在 
 * 2.Toast组件挂载完成后,isVisible.value = true;
 * 3.开始显示div, 因为配置了动画，所以要在一秒内完成显示的动画 101秒 
 *   并且开了一个定时器，延时3秒执行
 * 4.等到了103秒的时候， isVisible.value = false;
 *   此时要开启离开动画，耗时1秒。也就是说在104秒的时候离开动画执行结束
 * 5.在104秒离开动画结束的时候，执行@after-leave对应的函数handleAfterLeave
 *  发射一个自定义的destroy事件，父组件监听到了之后会移除container  document.body.removeChild(container)
 * 
 */